<template>
  <div class="home">
    <router-view />
    <!-- 这是底部 -->

    <van-tabbar
      v-model="active"
      :fixed="true"
      :route="true"
      :placeholder="true"
    >
      <van-tabbar-item
        v-for="(item, index) in icon"
        :key="index"
        @click="onChange(index)"
        :to="item.url"
      >
        <div class="footer_box">
          <div class="icon"><img :src="icon[index].inactive" /></div>
          <span v-if="!(index == 0 && flag == -1) && (flag !== 0 || index != 0)"
            >{{ item.title }}
          </span>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { onBeforeMount, ref, reactive } from "vue";
export default {
  setup() {
    const active = ref(0);
    const flag = ref(-1);
    const value = ref("");

    const icon = [
      {
        title: "微脉",
        active: "https://z3.ax1x.com/2021/07/16/WKLhm8.png",
        inactive: "https://z3.ax1x.com/2021/07/16/WKL5Tg.png",
        url: "/home/index",
      },
      {
        title: "寻医",
        active: "https://z3.ax1x.com/2021/07/16/WKL7fs.png",
        inactive: "https://z3.ax1x.com/2021/07/16/WKLTYj.png",
        url: "/home/finddoctor/tuijian",
      },
      {
        title: "健康头条",
        active: "https://z3.ax1x.com/2021/07/16/WKLR6P.png",
        inactive: "https://z3.ax1x.com/2021/07/16/WKLWOf.png",
        url: "/home/healthheader/doctor",
      },
      {
        title: "健康商城",
        active: "https://z3.ax1x.com/2021/07/16/WKLokQ.png",
        inactive: "https://z3.ax1x.com/2021/07/16/WKLgSI.png",
        url: "/home/healthshop",
      },
      {
        title: "我的",
        active: "https://z3.ax1x.com/2021/07/16/WKL40S.png",
        inactive: "https://z3.ax1x.com/2021/07/16/WKL2lt.png",
        url: "/home/mine",
      },
    ];
    const temp = reactive({
      arr: [
        {
          active: "https://z3.ax1x.com/2021/07/16/WKLhm8.png",
          inactive: "https://z3.ax1x.com/2021/07/16/WKL5Tg.png",
        },
        {
          active: "https://z3.ax1x.com/2021/07/16/WKL7fs.png",
          inactive: "https://z3.ax1x.com/2021/07/16/WKLTYj.png",
        },
        {
          active: "https://z3.ax1x.com/2021/07/16/WKLR6P.png",
          inactive: "https://z3.ax1x.com/2021/07/16/WKLWOf.png",
        },
        {
          active: "https://z3.ax1x.com/2021/07/16/WKLokQ.png",
          inactive: "https://z3.ax1x.com/2021/07/16/WKLgSI.png",
        },
        {
          active: "https://z3.ax1x.com/2021/07/16/WKL40S.png",
          inactive: "https://z3.ax1x.com/2021/07/16/WKL2lt.png",
        },
      ],
    });
    const onChange = (index) => {
      flag.value = index;
      for (let i = 0; i < temp.arr.length; i++) {
        icon[i].inactive = temp.arr[i].inactive;
      }
      icon[index].inactive = temp.arr[index].active;
      sessionStorage.setItem("key", index);
    };
    onBeforeMount(() => {
      let m = sessionStorage.getItem("key");
      if (+m != 0) {
        flag.value = +m;
      } else {
        flag.value = -1;
      }
      for (let i = 0; i < temp.arr.length; i++) {
        icon[i].inactive = temp.arr[i].inactive;
      }
      let num;
      flag.value == -1 ? (num = 0) : (num = flag.value);
      icon[num].inactive = temp.arr[num].active;
    });

    return {
      icon,
      active,
      onChange,
      flag,
      value,
      temp,
    };
  },
};
</script>
<style lang="less" scoped>
.home {
  // 底部样式
  :deep(.van-tabbar) {
    padding: 6px 0;
    .footer_box {
      text-align: center;
    }
    .icon {
      width: 40px;
      height: 40px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .van-tabbar-item__text {
    span {
      width: 100%;
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #000000;
    }
  }
}
</style>
